<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="MobileOptimized" content="width">
	<meta name="HandheldFriendly" content="true">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=11">
	<!-- / 清理缓存-->
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="content-type" content="no-cache, must-revalidate" />
	<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
	<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
	<!-- / 清理缓存-->
	<title>CSS-HOME</title>
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<!-- import Vue before Element -->
	<script src="https://unpkg.zhimg.com/vue@2.6.11/dist/vue.min.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.zhimg.com/element-ui@2.13.0/lib/index.js"></script>
	<!-- import menuList -->
	<script src="common/menulist.js"></script>
	<style>
		html, body{
			margin: 0;
			padding: 0;
			border: 0;
		}
		.el-menu {
			border: 0;
		}
		.el-aside::-webkit-scrollbar {/*滚动条整体样式*/
			width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
		}
		.el-aside::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
			border-radius: 5px;
			background: transparent;
		}
		.el-aside:hover::-webkit-scrollbar-thumb {
			background: #05e3a1;
		}
		.el-aside:hover::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			border-radius: 10px;
			background: #f2feff;
		}
	</style>
</head>
<body>
	<div id="app">
		<el-container style="height: 100vh;">
			<el-aside :width="menuwidth" style="box-shadow: 2px 0 6px rgba(0,21,41,.35);">
				<el-menu
				  default-active="css3"
				  active-text-color="#05e3a1">
				  <div style="height: 60px; text-align: center; line-height: 60px;">
					<i class="el-icon-s-home" style="margin-right: 10px;"></i>H5+CSS3
				  </div>
				  <el-menu-item index="css3" @click="clicklist('lib/css3Clock/index.html')">
				  	<i class="el-icon-star-off"></i>
				  	<span slot="title">CSS3时钟</span>
				  </el-menu-item>
				  <item :model="menuList" @clicklist="clicklist"></item>
				</el-menu>
			</el-aside>
			<el-container>
				<el-header style="height: 30px;line-height: 30px;">
					<span style="font-size: 25px;">
						<i v-if="menuwidth == '300px'" class="el-icon-s-fold" @click="menuwidth = '0px'"></i>
						<i v-if="menuwidth == '0px'" class="el-icon-s-unfold" @click="menuwidth = '300px'"></i>
					</span>
					<a href="https://gitee.com/xybobo/css-home" target="_blank" style="margin-left:40%;color:#0D1B2E;">CSS-HOME源码地址</a>
				</el-header>
				<el-main :style="finalstyle">
					<iframe class="iframe-scorll" style="width: 100%;height: 100%;" frameborder="no" :src="iframeurl"></iframe>
				</el-main>
				<!-- <el-footer>Footer</el-footer> -->
			</el-container>
		</el-container>
	</div>
</body>
<!-- item template 递归循环菜单 -->
<script type="text/x-template" id="item-template">
	<div>
	  <template v-for="item in model">
		<el-submenu v-if="item.children" :index="item.id">
			<template slot="title">
			  <i :class="item.icon != ''? item.icon : 'el-icon-star-off'"></i>
			  {{ item.title }}
			</template>
			<item :model="item.children" @clicklist="clicklist"></item>
		</el-submenu>
		<el-menu-item v-else :index="item.id"  @click="clicklist(item.url)">
			<i v-if="item.children" :class="item.icon != ''? item.icon : 'el-icon-star-off'"></i>
			<span slot="title">{{ item.title }}</span>
		</el-menu-item>
	  </template>
	</div>
</script>	

<script>
	// define the item component 注册菜单组件
	Vue.component('item', {
	  template: '#item-template',
	  props: {
	    model: Object
	  },
	  methods: {
	    clicklist(url) {
			this.$emit('clicklist', url);
		}
	  }
	});
	
	new Vue({
	  el: '#app',
	  data: function() {
		return {
			visible: false,
			isCollapse: true,
			menuwidth: '300px',
			menuList: window.menulist,
			iframeurl: 'lib/css3Clock/index.html',
		}
	  },
	  computed: {
		finalstyle() {
			return {
				overflow: 'hidden',
				padding: this.menuwidth=='0px' ? '0' :'0 0 0 10px'
			}
		}  
	  },
	  methods: {
		handleOpen(key, keyPath) {
		  console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
		  console.log(key, keyPath);
		},
		clicklist(url) {
			this.iframeurl = url;
		}
	  }
	})
</script>
</html>
